<template>

    <div class="container">
        <div>
            <!-- 显示Comment中的数据-->
            <div class="Comment">
                <el-scrollbar>
                    <el-table
                            v-loading="loading"
                            :data="currentPageComment"
                            ref="multipleTableRef"
                            @selection-change="handleSelectionChange"
                            class="table"
                    >
                        <el-table-column type="selection" width="55"/>
                        <el-table-column width="100px" prop="course_id" label="课程编号"/>
                        <el-table-column width="150px" prop="course_name" label="课程名称"/>
                        <el-table-column width="150px" prop="school_id" label="评论ID"/>
                        <el-table-column width="200px" prop="comment" label="课程评价"/>
                        <el-table-column width="150px" prop="timeString" label="创建时间"/>
                    </el-table>
                </el-scrollbar>
            </div>
            <br>
            <div>
                <el-pagination
                        large
                        background
                        layout="prev, pager, next"
                        :total="AllComment.length"
                        class="Comment"
                        @current-change="hanndlePageChange"
                />
            </div>
        </div>
        <el-button type="primary" size="default" style="margin-top: 10px" @click="pass">
            通过
        </el-button>
        <el-button type="danger" size="default" style="margin-top: 10px" @click="disPass">
            不通过
        </el-button>
    </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import {ElTable} from 'element-plus'
import axios, {create} from 'axios'
// import {CommonServerOptions} from 'vite'
import {ElMessageBox} from 'element-plus'

const size = ref('default')
const labelPosition = ref('right')
import {ElMessage} from "element-plus";


let currentComment = ref([])
const radio = ref()
let currentPageComment = ref([])
const AllComment = ref([])
const pageNumber = ref(10)
const loading = ref(true)
const commentLoading = ref(false)
const inputComment = ref('')
const currentCommentSortByTimeDesc = ref(true)
let currentCourseID = ref('')

// 使用onMounted方法
onMounted(() => {
    axios.get('api/getNoCheckComment', {}).then((res: any) => {
        if (res.data.status === 'success') {
            AllComment.value = res.data.data
            handleCurrentComment()
            // console.log(999, currentComment)
            // currentPageComment.value = currentComment.value.slice(0, pageNumber.value)
            ElMessage({
                message: '获取成功',
                type: 'success',
            })
            loading.value = false
        }
    })
})

interface Comment {
    time: string
    course_name: string
    school_id: string
    content: string
    course_id: string
}

const multipleSelection = ref<Comment[]>([])

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const handleSelectionChange = (val: Comment[]) => {
    multipleSelection.value = val
}

function hanndlePageChange(val: number) {
    console.log(val)
    currentPageComment.value = currentComment.value.slice((val - 1) * pageNumber.value, val * pageNumber.value)
}

function handleCurrentComment() {
    loading.value = true
    // 按时间戳排序
    if (currentCommentSortByTimeDesc.value) {
        currentComment.value = AllComment.value.sort((a: any, b: any) => {
            return b.time - a.time
        })
        console.log(999, currentComment)
    } else {
        currentComment.value = AllComment.value.sort((a: any, b: any) => {
            return a.time - b.time
        })
    }
    // time是时间戳格式，要除以 (10 ** 7)
    currentComment.value = AllComment.value
    currentComment.value.forEach((item: any) => {
        item.timeString = new Date(item.time / (10 ** 4)).toLocaleString()
    })
    loading.value = false
    hanndlePageChange(1)
}



function pass(){
    loading.value = true
    console.log(multipleSelection.value)
    if (multipleSelection.value.length === 0) {
        ElMessage({
            message: '请选择要审核的评论',
            type: 'error',
        })
        loading.value = false
        return
    }
    // 取出选中的评论的time
    const idList = multipleSelection.value.map((item: any) => {
        return item.time
    })
    console.log(idList)
    axios.post('api/pass', {
        list: idList,
    }, {
        timeout: 10000 // 请求超时时间10s
    }).then((res: any) => {
        console.log(res)
        axios.get('api/getNoCheckComment', {}).then((res: any) => {
            if (res.data.status === 'success') {
                AllComment.value = res.data.data
                handleCurrentComment()
                ElMessage({
                    message: '所选评论已审核通过~',
                    type: 'success',
                })
                loading.value = false
            }
        })
    }).catch((err: any) => {
        loading.value = false
        ElMessage.error('请求超时')
    })

}

function disPass(){
    loading.value = true
    console.log(multipleSelection.value)
    if (multipleSelection.value.length === 0) {
        ElMessage({
            message: '请选择要审核的评论',
            type: 'error',
        })
        loading.value = false
        return
    }
    // 取出选中的评论的time
    const idList = multipleSelection.value.map((item: any) => {
        return item.time
    })
    console.log(idList)
    axios.post('api/disPass', {
        list: idList,
    }, {
        timeout: 10000 // 请求超时时间10s
    }).then((res: any) => {
        console.log(res)
        axios.get('api/getNoCheckComment', {}).then((res: any) => {
            if (res.data.status === 'success') {
                AllComment.value = res.data.data
                handleCurrentComment()
                ElMessage({
                    message: '所选评论已审核不通过~',
                    type: 'success',
                })
                loading.value = false
            }
        })
    }).catch((err: any) => {
        loading.value = false
        ElMessage.error('请求超时')
    })

}


</script>

<style>
.el-radio-group {
    margin-right: 12px;
}

.container {
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: 100%;
}

.Search {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 10px;
}

.Comment {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
}

.inputComment {
    position: fixed;
    bottom: 0;
    right: 150px;
    padding: 10px;
    width: 18%;
}

.inputSumbit {
    position: fixed;
    bottom: 0;
    right: -80px;
    padding: 10px;
    width: 20%;
}

.input {
    float: left;
    margin-top: 30px;
}


/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
.el-table th.gutter {
    display: table-cell !important;
}

</style>
